<template>
  <div class="c-admin-header-top">
    <div
      class="c-admin-header-fun c-admin-header-fun-collapse"
      @click="setCollapse(!collapse)"
    >
      <c-icon
        :name="collapse ? 'indent' : 'outdent'"
        class="c-admin-header-fun-icon"
      ></c-icon>
    </div>
    <div class="c-admin-header-top-fun">
      <div class="c-admin-header-fun c-admin-header-fun-todo">
        <el-badge :value="15" class="c-admin-header-fun-badge">
          <c-icon name="carryout" class="c-admin-header-fun-icon"></c-icon>
        </el-badge>
      </div>
      <div class="c-admin-header-fun c-admin-header-fun-msg">
        <el-badge :value="15" class="c-admin-header-fun-badge">
          <c-icon name="bell" class="c-admin-header-fun-icon"></c-icon>
        </el-badge>
      </div>
      <div class="c-admin-header-fun c-admin-header-fun-lang">
        <el-dropdown trigger="click" @command="changeLang">
          <div class="c-admin-header-lang">
            <c-icon name="earth" class="c-admin-header-fun-icon"></c-icon>
          </div>
          <el-dropdown-menu slot="dropdown">
            <template v-for="lang in langsList">
              <el-dropdown-item :command="lang.value" :key="lang.value">
                {{ lang.label }}
              </el-dropdown-item>
            </template>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="c-admin-header-fun c-admin-header-fun-avatar">
        <el-dropdown trigger="click" @command="avatarDropdown">
          <div class="c-admin-header-avatar">
            <el-avatar
              size="small"
              src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
            ></el-avatar>
            <span class="c-admin-header-avatar-title">{{ userName }}</span>
            <el-icon
              name="arrow-down"
              left
              class="c-admin-header-avatar-icon"
            ></el-icon>
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item icon="c-icon icon-user" command="centerSet">
              <!-- 个人中心 -->
              {{ multLang('title_ac_c') }}
            </el-dropdown-item>
            <el-dropdown-item
              icon="c-icon icon-logout"
              divided
              command="logout"
            >
              <!-- 退出登录 -->
              {{ multLang('title_aax_o') }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>
<script>
import { clearLoginInfo } from '@/util/login'
import { logout } from '@api/login'
import { mapState, mapActions } from 'vuex'
import { toRoute } from '@/util/router'
import { Routes } from '@vue/router/routes'
export default {
  name: 'CHeaderTop',
  components: {},
  props: {},
  data() {
    return {}
  },
  computed: {
    ...mapState({
      userName: state => state.login.name,
      collapse: state => state.menu.collapse
    }),
    langsList() {
      return this.optionList('langs')
    }
  },
  watch: {},
  beforeCreate() {},
  created() {
    this.setOption({ key: 'langs' })
  },
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  activated() {},
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {
    ...mapActions({
      setCollapse: 'menu/setCollapse',
      setToken: 'login/setToken',
      clearActiveMenu: 'menu/clearActiveMenu',
      setLang: 'lang/setLang',
      setLangs: 'lang/setLangs'
    }),
    changeLang(key) {
      this.setLang(key).then(() => this.setLangs())
    },
    avatarDropdown(cmd) {
      const fn = this[cmd]
      fn && typeof fn === 'function' && fn()
    },
    logout() {
      logout().then(() => {
        clearLoginInfo()
        toRoute(Routes.Login)
      })
    }
  }
}
</script>
<style lang="scss">
@include admin {
  .c-admin-header {
    &-top {
      height: 59px;
      border-bottom: 1px solid #edeff3;
      &-fun {
        float: right;
      }
    }
    &-fun {
      float: left;
      @include wh(59px, 59px);
      line-height: 59px;
      transition: all 0.4s;
      cursor: pointer;
      text-align: center;
      margin-right: 10px;
      &:hover {
        background-color: #f5f5f5;
      }

      &-avatar {
        width: auto;
        .el-dropdown {
          vertical-align: middle;
          padding: 0 10px;
        }
        margin: 0;
        // font-size: 0;
      }
      &-icon {
        font-size: 24px;
        @include theme('head-text', 'color');
      }
      &-badge {
        height: 24px;
        line-height: 24px;
      }
      &-lang {
        font-size: 0;
        .el-dropdown {
          width: 100%;
          vertical-align: middle;
        }
      }
    }
    &-avatar {
      font-size: 0;
      .el-avatar {
        display: inline-block;
        vertical-align: middle;
      }
      &-title {
        display: inline-block;
        font-size: 14px;
        color: $--color-primary;
        vertical-align: middle;
        margin-left: 10px;
      }
      &-icon {
        font-size: 14px;
        color: $--color-primary;
        vertical-align: middle;
      }
    }
    &-lang {
      .c-admin-header-fun-icon {
        vertical-align: middle;
      }
    }
  }
}
</style>
